<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta
        http-equiv="Content-Type"
        content="text/html; charset=utf-8"
    />
    <title>2 roof</title>

    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>

    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <!-- 允许您将模型导入到场景中 -->
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <!-- 允许您使用触摸屏 -->
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
</head>

<body>
    <canvas
        id="renderCanvas"
        touch-action="none"
    ></canvas>
    <!-- 注意browseatouch-action="none"以获得PEPr/canvas调整大小事件的最佳效果 -->

    <script>
        const canvas = document.getElementById("renderCanvas"); //获取canvas元素
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        //在这里添加与playground格式匹配的代码
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);//使用引擎
            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));//设置摄像机
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));//设置灯光

            //添加地面
            const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 10, height: 10 });

            //添加地面颜色纹理
            const groundMat = new BABYLON.StandardMaterial("groundMat");
            groundMat.diffuseColor = new BABYLON.Color3(124 / 255, 205 / 255, 124 / 255);

            //添加房子和屋顶纹理贴图
            const roofMat = new BABYLON.StandardMaterial("roofMat");
            roofMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/roof.jpg", scene);
            const box1Mat = new BABYLON.StandardMaterial("boxMat");
            box1Mat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/cubehouse.png");


            //在每一面设置不同的贴图
            const faceUV = [];
            faceUV[0] = new BABYLON.Vector4(0.5, 0.0, 0.75, 1.0); //rear face
            faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 0.25, 1.0); //front face
            faceUV[2] = new BABYLON.Vector4(0.25, 0, 0.5, 1.0); //right side
            faceUV[3] = new BABYLON.Vector4(0.75, 0, 1.0, 1.0); //left side
            // top 4 and bottom 5 not seen so not set，底和顶看不见


            // 添加box1
            const box1 = BABYLON.MeshBuilder.CreateBox("box1", { faceUV: faceUV, wrap: true });
            box1.scaling.x = 2;
            box1.scaling.y = 2;
            box1.scaling.z = 2;
            box1.position.y = 1;
            //添加roof
            const roof = BABYLON.MeshBuilder.CreateCylinder("roof", { diameter: 3, height: 2, tessellation: 3 });
            roof.scaling.x = 1;
            roof.rotation.z = Math.PI / 2;
            roof.position.y = 2.75;

            //纹理绑定
            roof.material = roofMat;
            box1.material = box1Mat;
            ground.material = groundMat;

            return scene;
        }
        const scene = createScene(); //调用createScene函数

        //注册一个渲染循环来重复渲染场景
        engine.runRenderLoop(function () {
            scene.render();
        });

        // 注意浏览器、画布大小调整事件
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>